<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>烟花</title>
        <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="../js/public.js"></script>
    <script>
        function Fireworks(el) {
            this.ele = document.querySelector(el);
            this.bindEvent();
            // this.show();
        }

        Fireworks.prototype.bindEvent = function () {
            let that = this;
            this.ele.onclick = function (e) {
                e = e || window.event;
                let fire = that.show();
                fire.style.left = e.offsetX + 'px';
                $(fire).animate({
                    top: e.offsetY
                }, 1000, function () {
                    fire.remove();
                })
            }
        }

        Fireworks.prototype.show = function () {
            let div = document.createElement('div');
            div.style.backgroundColor = ranColor();
            div.className = 'ball';
            this.ele.appendChild(div);
            return div;
        }

        let a = new Fireworks('#box');
    </script>
</html>
